<template>
    <div class="tooltip">
        <div v-if="groupInfo.length === 1">
            <div v-for="item in props.groupInfo" :key="item.id" class="group-item">
                <UserInfo :name="item.name" :avatar-shape="'square'" :avatar="item.avatar"></UserInfo>
                <p class="times">
                    （ <span v-if="item.join_time">入群：{{ item.join_time }}</span>
                    <span v-if="item.retreat_time">&nbsp;退群：{{ item.retreat_time }}</span>
                    ）
                </p>
            </div>
        </div>
        <el-tooltip v-else-if="groupInfo.length > 1" class="tip-box" effect="light" placement="top-start">
            <template #content>
                <el-scrollbar class="group-box" :max-height="105">
                    <div v-for="item in props.groupInfo" :key="item.id" class="group-item">
                        <UserInfo :name="item.name" :avatar-shape="'square'" :avatar="item.avatar"></UserInfo>
                        <p class="times">
                            （ <span v-if="item.join_time">入群：{{ item.join_time }}</span>
                            <span v-if="item.retreat_time">&nbsp;退群{{ item.retreat_time }}</span>
                            ）
                        </p>
                    </div>
                </el-scrollbar>
            </template>
            <p class="many">
                <span>
                    {{ groupInfo.length }}
                </span>
                个群聊
            </p>
        </el-tooltip>
        <span v-else>--</span>
    </div>
</template>
<script setup lang="tsx">
// 用户信息组件
import UserInfo from './UserInfo.vue';
interface Props {
    groupInfo: any;
}
const props = withDefaults(defineProps<Props>(), {
    groupInfo: []
});
</script>
<style scoped lang="scss">
.tooltip {
    display: flex;
    align-items: center;
}
:deep(.tip-box) {
    padding: 10px 16px;
}
.group-box {
    padding: 10px 0;
}
.group-item {
    display: flex;
    align-items: center;
    margin-bottom: 20px;
    &:last-of-type {
        margin-bottom: 0;
    }
}
.user-name {
    font-weight: 400;
    max-width: 80px;
    margin: 0 4px 0 8px;
    overflow: hidden;
    white-space: nowrap;
    text-overflow: ellipsis;
}
.many {
    cursor: pointer;
    span {
        color: #ff6b00;
    }
}
.times {
    white-space: nowrap;
}
</style>
